<template>
  <view
    class="user-info flex px-[50rpx] justify-between py-[50rpx]"
      :style="{
      backgroundImage:
        content.background == 1
          ? ``
          : getImageUrl ? `url(${getImageUrl(content.backgroundurl)})` : '',
    }"
  >
    <view
      v-if="isLogin"
      class="flex items-center"
      @click="navigateTo('/packageA/pages/user_data/user_data')"
    >
      <u-avatar :src="user.avatar" :size="120"></u-avatar>
	  <!-- text-white -->
      <view class="ml-[20rpx]">
        <view class="text-2xl">{{ user.nickname }}</view>
        <view class="text-xs mt-[18rpx]" @click.stop="copy(user.username)">
          账号：{{ user.username }}
        </view>
      </view>
    </view>
    <router-navigate
      v-else
      hover-class="none"
      to="/pages/login/login"
    >
      <view class="flex items-center">
          <u-avatar
              src="/static/images/user/default_avatar.png"
              :size="120"
          ></u-avatar>
		  <!-- text-white -->
          <view class="text-3xl ml-[20rpx]">登录/注册</view>
      </view>
    </router-navigate>
    <router-navigate
      v-if="isLogin"
      hover-class="none"
      to="/packageA/pages/user_set/user_set"
    >
      <u-icon name="setting" color="#515151" :size="48"></u-icon>
    </router-navigate>
  </view>
</template>
<script lang="ts" setup>
import { useCopy } from "@/hooks/useCopy";
import { useAppStore } from "@/stores/app";
import { onMounted } from 'vue';
import { useRouter } from 'uniapp-router-next'

const router = useRouter()

// 延迟初始化 store，避免在 Pinia 未完全初始化时调用
let appStore: ReturnType<typeof useAppStore> | null = null
let getImageUrl: ((url: string) => string) | null = null

// 在 onMounted 中初始化 store，确保 Pinia 已完全初始化
onMounted(() => {
    appStore = useAppStore()
    if (appStore) {
        getImageUrl = appStore.getImageUrl
    }
})

const props = defineProps({
  content: {
    type: Object,
    default: () => ({}),
  },
  styles: {
    type: Object,
    default: () => ({}),
  },
  user: {
    type: Object,
    default: () => ({}),
  },
  isLogin: {
    type: Boolean,
  },
});
const { copy } = useCopy();
const navigateTo = (url: string) => {
  router.navigateTo(url);
};
</script>

<style lang="scss" scoped>
.user-info {
  // background: url("../../../static/images/user/my_topbg.png");
  height: 115px;
  background-position: bottom;
  background-size: 100% auto;
  position: relative;
  background: #FFF;
  // background: linear-gradient(
  //   90deg,
  //   var(--theme-color) 0,
  //   var(--theme-dark-color) 100%
  // );

  // &::after {
  //     content: '';
  //     // background-color: aqua;

  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     width: 100%;
  //     height: 100%;
  //     z-index: -1;
  // }
}
</style>
